/* Prefix all pages with mb- for no collisions */

/* Page class for all mobile pages */
.mb-page {
  -webkit-backface-visibility: hidden;
  position: absolute;
  width: 100%;
  /*height: 100%;
  overflow: hidden;*/
  height: auto;
  max-height: 100%;
}

/* 
 * Slide
 * slide pages horizontally
 */
@-webkit-keyframes slideInFromRight {
  0% { -webkit-transform: translate3d(100%, 0, 0); }
  100% { -webkit-transform: translate3d(0, 0, 0); }
}
@-webkit-keyframes slideOutToRight {
  0% { -webkit-transform: translate3d(0, 0, 0); }
  100% { -webkit-transform: translate3d(100%, 0, 0); }
}
@-webkit-keyframes slideInFromLeft {
  0% { -webkit-transform: translate3d(-100%,0,0); }
  100% { -webkit-transform: translate3d(0, 0, 0); }
}
@-webkit-keyframes slideOutToLeft {
  0% { -webkit-transform: translate3d(0,0,0); }
  100% { -webkit-transform: translate3d(-100%, 0, 0); }
}
.mb-slide {
  -webkit-animation-duration: 0.3s;
  -webkit-animation-timing-function: ease;
}
.mb-slide.mb-in {
  -webkit-animation-name: slideInFromRight;
}
.mb-slide.mb-in.mb-reverse {
  -webkit-animation-name: slideOutToRight;
  -webkit-transform: translate3d(100%,0,0);
}
.mb-slide.mb-out {
  -webkit-animation-name: slideOutToLeft;
  -webkit-transform: translate3d(-100%, 0, 0);
}
.mb-slide.mb-out.mb-reverse {
  -webkit-animation-name: slideInFromLeft;
}


/*
 * Modal!
 * slide a page in from the bottom onto a page
 */
@-webkit-keyframes modalUp {
  0% { -webkit-transform: translate3d(0, 100%, 0); }
  100% { -webkit-transform: translate3d(0, 0, 0); }
}
@-webkit-keyframes modalDown {
  0% { -webkit-transform: translate3d(0, 0, 0); }
  100% { -webkit-transform: translate3d(0, 100%, 0); }
}
.mb-modal {
  z-index: 10;
  -webkit-animation-duration: 0.3s;
}
.mb-modal.mb-in,
.mb-modal.mb-out.mb-reverse {
  -webkit-animation-name: modalUp;
}
.mb-modal.mb-in.mb-reverse,
.mb-modal.mb-out {
  z-index: 9; /* Lower than modal-in */
  -webkit-animation-name: modalDown;
  -webkit-transform: translate3d(0, 100%, 0);
}